﻿@inherits AppAuthComponentBase
@inject ServiceStackStateProvider AuthStateProvider;
@inject NavigationManager NavigationManager;
@inject IJSRuntime JS

<header class="border-b border-gray-200 dark:border-gray-800 pr-3">
    <div class="flex flex-wrap items-center">
        <div class="flex flex-grow flex-shrink flex-nowrap justify-end items-center">
            <nav class="relative flex flex-grow">
                <ul class="flex flex-wrap items-center justify-end w-full m-0">
                    @foreach (var item in NavItems)
                    {
                        <li class="relative flex flex-wrap just-fu-start m-0">
                            <NavLink href=@item.Href class="flex items-center justify-start mw-full p-4 hover:text-green-600 dark:hover:text-green-400">@item.Label</NavLink>
                        </li>
                    }

                    <AuthorizeView>
                        <Authorized>
                            <li @onblur="hideAuthMenu">
                                <!-- Profile dropdown -->
                                <div class="mx-3 relative">
                                    <div>
                                        <button type="button" @onclick=@(_ => ShowAuthMenu=!ShowAuthMenu)
                                                class="max-w-xs bg-white dark:bg-black rounded-full flex items-center text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-cyan-500 lg:p-2 lg:rounded-md lg:hover:bg-gray-50 dark:lg:hover:bg-gray-900 dark:ring-offset-black" id="user-menu-button" aria-expanded="false" aria-haspopup="true">
                                            <img class="h-8 w-8 rounded-full" src=@User.GetProfileUrl() alt="">
                                            <span class="hidden ml-3 text-gray-700 dark:text-gray-300 text-sm font-medium lg:block">
                                                <span class="sr-only">Open user menu for </span>
                                                @User.GetDisplayName()
                                            </span>
                                            <!-- Heroicon name: solid/chevron-down -->
                                            <svg class="hidden flex-shrink-0 ml-1 h-5 w-5 text-gray-400 dark:text-gray-500 lg:block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                                <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
                                            </svg>
                                        </button>
                                    </div>
                                    <div class=@CssUtils.ClassNames("z-10 origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg py-1 bg-white dark:bg-black ring-1 ring-black/5 focus:outline-none",
                                         ShowAuthMenu ? "transform opacity-100 scale-100" : "transform opacity-0 scale-95")
                                         @onclick="hideAuthMenu" role="menu" aria-orientation="vertical" aria-labelledby="user-menu-button" tabindex="-1">
                                        @if (ShowAuthMenu)
                                        {
                                            <NavLink href="/profile" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800" role="menuitem" tabindex="-1" id="user-menu-item-2">
                                                Profile
                                            </NavLink>
                                            <a href="javascript:void(0);" @onclick="logout" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800" role="menuitem" tabindex="-1" id="user-menu-item-2">
                                                Logout
                                            </a>
                                        }
                                    </div>
                                </div>
                            </li>
                        </Authorized>
                        <Authorizing>
                            <li class="relative flex flex-wrap just-fu-start m-0">
                                <NavLink href=@LoginUrl class="m-2 mr-4">
                                    <SecondaryButton>
                                        Sign In
                                    </SecondaryButton>
                                </NavLink>
                            </li>
                        </Authorizing>
                        <NotAuthorized>
                            <li class="relative flex flex-wrap just-fu-start m-0">
                                <NavLink href=@LoginUrl class="m-2 mr-4">
                                    <SecondaryButton>
                                        Sign In
                                    </SecondaryButton>
                                </NavLink>
                            </li>
                        </NotAuthorized>
                    </AuthorizeView>

                    <li class="relative flex flex-wrap just-fu-start m-0">
                        <DarkModeToggle />
                    </li>

                </ul>
            </nav>
        </div>
    </div>
</header>

@code {
    bool ShowAuthMenu = false;

    string LoginUrl { get; set; } = BlazorConfig.Instance.RedirectSignIn;

    List<NavItem> NavItems { get; set; } = new() {
        new NavItem { Label = "API Reference", Href = "https://reference.servicestack.net/api/ServiceStack.Blazor.Components.Tailwind/" },
    };

    void hideAuthMenu() => ShowAuthMenu = false;

    protected override Task OnParametersSetAsync()
    {
        LoginUrl = NavigationManager.GetLoginUrl();
        return base.OnParametersSetAsync();
    }

    async Task logout()
    {
        await AuthStateProvider.LogoutAsync(redirectTo: LoginUrl);
    }
}
